<template lang="html">
  <el-dialog
    width="500px"
    :title="`${id ? '修改' : '新增'}数据源`"
    :close-on-click-modal="false"
    :visible="dialogVisible"
    destroy-on-close
    @close="close"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="mt10">
      <el-form-item label="数据源类型" prop="dtType">
        <el-select  v-model="ruleForm.dtType"  >
          <el-option  v-for="item in dtTypeOps"  :key="item.value" :label="item.name"  :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="数据源名称" prop="dtName">
        <el-input v-model="ruleForm.dtName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="主机" prop="host">
        <el-input v-model="ruleForm.host" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="端口" prop="port">
        <el-input v-model="ruleForm.port" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="数据库名" prop="dbName">
        <el-input v-model="ruleForm.dbName" placeholder="请输入" />
      </el-form-item>
     
    </el-form>

    <span slot="footer" class="dialog-footer">
      <span style="float:left">
          <el-button type="warning"  @click="testData">测试</el-button>
      </span>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitData">确认</el-button>
    </span>
 
 </el-dialog>
</template>

<script>
import { SaveData,Detail,TestDt } from "api/dtmg/datasource";
import dialogMixin from "mixins/dialogMixin";
import rules from "./config/rules";   

export default {
  components: { },
  mixins: [dialogMixin],
  props: {
    // 当前行数据
    id: {
      type: [String, Number],
      default: "",
    },
    dtTypeOps: {
      type: [],
      default: null,
    },
  },
  data() {
    return {
      ruleForm: {
        dtType: "1",
        dtName: "",
        host: "",
        port: "",
        userName: "",
        password: "",
        dbName: ""
      },
      rules,  
    };
  },

  methods: {
    /**
     * 初始化弹窗
     */
    initForm() {
      if (this.id) {
        this.getDetail();
      }
    },
    async getDetail() {
      try {
        const data = await Detail(this.id); 
        Object.assign(this.ruleForm, data);
      } catch (e) {
        console.log(e);
      } finally {
      }
    },
    /**
     * 提交
     */
    async doSubmit() {
      try {
        const { ...rest } = this.ruleForm; 
        await SaveData({...rest,id:this.id });
        //console.log({...rest,id:this.id });
        this.$message.success(`数据源${this.id ? "修改" : "新增"}成功`);
        this.$emit("success");
        this.close();
      } catch (e) {
       // console.log(e);
      } finally {
        this.btnLoading = false;
      }
    }, 
 /**
     * 提交
     */
     async testData() {
      try { 
        await TestDt( this.ruleForm);  
        this.$message.success(`数据源测试成功`);
      } catch (e) {
        //console.log(e);
      } 
    }, 

  },
};
</script>
